<template>
    <div class="withdrawal">
        <!--选择提现金额-->
        <div class="withdrawal_container">
            <!-- <van-cell-group> -->
            <van-field v-model="bankname" label="" placeholder="请输入开户行" clearable/>
            <van-field v-model="bankcard" label="" placeholder="请输入银行卡号" clearable/>
            <van-field v-model="username" label="" placeholder="请输入姓名" clearable/>
            <van-field v-model="value" label="￥" placeholder="请输入提现金额" clearable/>
            <!-- </van-cell-group> -->
            <p>钱包可提现金额 <span
                    style="color: #00CC00;font-size: 1.1rem;font-weight: 500;margin-right: .5rem">{{price}}</span>元
            </p>
        </div>
        <!--提交按钮-->
        <div class="withdrawal_sub">
            <van-button type="primary" @click="eventClickWithdrawalSub">确认提现</van-button>
        </div>
    </div>
</template>

<script>
    import {Field} from 'vant';
    import {Button, Dialog} from 'vant';

    export default {
        name: "withdrawal",
        components: {[Field.name]: Field, [Button.name]: Button},
        data() {
            return {
                price: '',
                bankname: '',
                bankcard: '',
                username: '',
                value: ''
            }
        },
        created() {
        },
        mounted() {
            this.price = this.$route.query.price;
        },
        methods: {
            eventClickWithdrawalSub() {
                if (!this.bankname) {
                    this.$toast('请输入开户行名称')
                    return false
                }
                if (!this.bankcard) {
                    this.$toast('请输入银行卡号')
                    return false
                }
                if (!this.username) {
                    this.$toast('请输入姓名')
                    return false
                }
                if (!this.value) {
                    this.$toast('请输入提现金额')
                    return false
                }
                if (parseFloat(this.value) > parseFloat(this.price)) {
                    this.$toast('余额不足，提现失败')
                } else {
                    var url = '/api/home/tixian/add';
                    var param = {
                        price: this.value,
                        bankname: this.bankname,
                        bankcard: this.bankcard,
                        username: this.username,
                        token: this.$store.state.options.user.token
                    };
                    this.$util.postRequestInterface(url, param, (res) => {
                        Dialog.alert({
                            title: '提示',
                            message: '提现成功'
                        }).then(() => {
                            this.$router.go(-1)
                        })
                    })
                }
            }
        }
    }
</script>

<style scoped lang="scss">
    .withdrawal {
        width: 100%;
        height: 100vh;
        background-color: #F5F5F5;
        position: relative;
        //选择提现金额
        .withdrawal_container {
            width: 100%;
            height: 90px;
            text-align: center;
            background-color: #fff;
            padding-top: 2rem;

            p {
                text-align: left;
                padding-left: 1.5rem;
                margin-top: .5rem;
                font-weight: 500;
                font-size: 1.1rem;
                color: #333333;
            }

            .van-cell {
                line-height: inherit !important;

                /deep/ .van-field__label {
                    width: 2rem !important;
                    text-align: left;
                }

                &:after {
                    position: absolute;
                    box-sizing: border-box;
                    content: ' ';
                    pointer-events: none;
                    right: 0;
                    bottom: 0;
                    left: 16px;
                    border-bottom: 1px solid #ebedf0;
                    -webkit-transform: scaleY(0.5);
                    transform: scaleY(0.5);
                }
            }
        }

        .withdrawal_sub {
            width: 100%;
            position: absolute;
            bottom: 0;

            .van-button {
                width: 100%;
            }

            .van-button--primary {
                background-color: #00CC00;
            }
        }
    }

</style>
